<template>
  <!-- 用户导入对话框 -->
  <el-dialog
    title="时段统计"
    :visible.sync="show"
    width="90%"
    @close="onCancel"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-table :loading="loading" :data="tableData">
      <el-table-column label="日期" align="center" prop="projcetTime" />
      <el-table-column label="呼叫总数" align="center" prop="callTotal" />
      <el-table-column label="呼入数" align="center" prop="callInNumber" />
      <el-table-column label="应答数" align="center" prop="answerNumber" />
      <el-table-column label="应答率" align="center" prop="answerRate" />
      <el-table-column label="转接数" align="center" prop="switchNumber" />
      <el-table-column
        label="转接率"
        align="center"
        prop="switchRate"
      ></el-table-column>
      <el-table-column label="呼损数" align="center" prop="callBadNumber" />
      <el-table-column label="呼损率" align="center" prop="callBadRate" />
      <el-table-column label="成功数" align="center" prop="successNumber" />
      <el-table-column label="成功率" align="center" prop="successRate" />
      <el-table-column label="BOT消费（元）" align="center" prop="botBill" />
      <el-table-column label="话费金额（元）" align="center" prop="phoneBill" />
      <el-table-column label="分钟数" align="center" prop="minuteNumber" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="getInfoList"
    />
  </el-dialog>
</template>

<script>
import { infoList } from "@/api/dataReport/project.js";
export default {
  props: {
    periodDialogShow: {
      type: Boolean,
      default: false,
    },
    uploadUrl: {
      type: String,
      default: "",
    },
    downloadUrl: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
  },

  watch: {
    periodDialogShow: {
      handler(val) {
        if (val) {
          this.show = val;
        }
      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.getInfoList();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      show:false,
      loading: false,
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  methods: {
    async getInfoList() {
      const params = {
        projectFormsId: this.id,
        ...this.pagination,
      };
      const { total, rows } = await infoList(params);
      this.total = total;
      this.tableData = rows;
      this.loading = false;
    },
    // 取消
    onCancel() {
      this.$emit("onClosePeriodDialog");
    },
  },
};
</script>

<style scoped></style>
